<template>
  <vc-viewer @ready="onViewerReady">
    <vc-collection-primitive>
      <vc-primitive-cluster
        ref="primitiveClusterRef"
        :show="true"
        :enabled="true"
        v-if="billboards.length"
        :billboards="billboards"
        :labels="labels"
        :minimum-cluster-size="minimumClusterSize"
        @cluster-event="onClusterEvent"
        @click="onClicked"
      ></vc-primitive-cluster>
    </vc-collection-primitive>
    <!-- 注记层 -->
    <vc-layer-imagery :sort-order="20">
      <vc-imagery-provider-tianditu
        map-style="cva_c"
        :token="tandituToken"
      ></vc-imagery-provider-tianditu>
    </vc-layer-imagery>
    <vc-layer-imagery :sort-order="10">
      <vc-imagery-provider-tianditu
        :map-style="mapStyle"
        :token="tandituToken"
        ref="provider"
      ></vc-imagery-provider-tianditu>
    </vc-layer-imagery>
  </vc-viewer>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { isNullOrUnDef } from "../utils/is";
import type { VcReadyObject } from "vue-cesium/lib/utils/types.js";

const viewer = ref<Cesium.Viewer>(null);

const tandituToken = ref("436ce7e50d27eede2f2929307e6b33c0");
const mapStyle = ref("img_c");
const billboards = ref<any>([]);
const labels = ref<any>([]);
const minimumClusterSize = ref(100);
const onViewerReady = (data: VcReadyObject) => {
  viewer.value = data.viewer;
  Cesium.Resource.fetchJson(
    "https://zouyaoji.top/vue-cesium/SampleData/json/schools.geojson"
  ).then((res) => {
    const { features } = res;
    for (let i = 0; i < features.length; i++) {
      const feature = features[i];
      const properties = feature.properties;
      const coordinates = feature.geometry.coordinates;

      labels.value.push({
        show: true,
        scale: 1,
        showBackground: true,
        backgroundColor:
          Cesium.Color.fromCssColorString("#000000").withAlpha(0.1),
        verticalOrigin: 1,
        horizontalOrigin: 0,
        pixelOffset: new Cesium.Cartesian2(0, -20),
        font: "16px sans-serif",
        position: [coordinates[0], coordinates[1]],
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
        distanceDisplayCondition: [0, Number.POSITIVE_INFINITY],
        text: properties.name,
      });

      billboards.value.push({
        image: "https://zouyaoji.top/vue-cesium/images/mark-icon.png",
        width: 32,
        height: 32,
        position: [coordinates[0], coordinates[1]],
        _xyData: properties,
        onClick: (e) => {
          console.log(e);
        },
      });
    }
  });
};
// methods
const onClicked = (e) => {
  console.log("onClicked", e);
};
const onClusterEvent = (clusteredEntities, cluster) => {
  debugger;
  //获取集合中第一个实体信息 Cesium.Entity
  const entity = clusteredEntities[0];

  cluster.point.show = false;
  // cluster.properties = entity.properties;
  const billboard = cluster.billboard as Cesium.Billboard;
  if (!isNullOrUnDef(entity.billboard)) {
    if (isNullOrUnDef(entity.billboard.verticalOrigin)) {
      billboard.verticalOrigin = Cesium.VerticalOrigin.CENTER;
    } else {
      billboard.verticalOrigin = entity.billboard.verticalOrigin.getValue();
    }
    billboard.image = entity.billboard.image.getValue();
    billboard.width = entity.billboard.width.getValue();
    billboard.height = entity.billboard.height.getValue();
    billboard.scale = entity.billboard.scale.getValue();
    // entity.position = billboard.position;
    // entity.cluster = cluster;
    billboard.id = {
      cluster: cluster,
      entity: entity,
      position: entity.position,
    };
    billboard.show = true;
  } else {
    billboard.show = false;
  }
  if (!isNullOrUnDef(entity.label)) {
    const label = cluster.label;
    if (!isNullOrUnDef(entity.label.font)) {
      label.font = entity.label.font.getValue();
    }
    label.text = entity.label.text.getValue();
    if (!isNullOrUnDef(entity.label.scale)) {
      label.scale = entity.label.scale.getValue();
    }
    if (!isNullOrUnDef(entity.label.horizontalOrigin)) {
      label.horizontalOrigin = entity.label.horizontalOrigin.getValue();
    }
    if (!isNullOrUnDef(entity.label.verticalOrigin)) {
      label.verticalOrigin = entity.label.verticalOrigin.getValue();
    }
    if (!isNullOrUnDef(entity.label.backgroundColor)) {
      label.backgroundColor = entity.label.backgroundColor.getValue();
    }
    if (isNullOrUnDef(entity.label.showBackground)) {
      label.showBackground = false;
    } else {
      label.showBackground = entity.label.showBackground.getValue();
    }
    if (!isNullOrUnDef(entity.label.style)) {
      label.style = entity.label.style.getValue();
    }
    if (!isNullOrUnDef(entity.label.outlineColor)) {
      label.outlineColor = entity.label.outlineColor.getValue();
    }
    if (!isNullOrUnDef(entity.label.outlineWidth)) {
      label.outlineWidth = entity.label.outlineWidth.getValue();
    }
    if (!isNullOrUnDef(entity.label.pixelOffset)) {
      label.pixelOffset = new Cesium.Cartesian2(
        entity.label.pixelOffset.getValue().x,
        entity.label.pixelOffset.getValue().y
      );
    }
    if (!isNullOrUnDef(entity.label.disableDepthTestDistance)) {
      label.disableDepthTestDistance =
        entity.label.disableDepthTestDistance.getValue();
    }
    if (!isNullOrUnDef(entity.label.distanceDisplayCondition)) {
      const far =
        entity.label.distanceDisplayCondition.getValue().x || Number.MIN_VALUE;
      const near =
        entity.label.distanceDisplayCondition.getValue().y || Number.MAX_VALUE;
      label.distanceDisplayCondition = new Cesium.Cartesian2(far, near);
    }
    label.show = true;
    if (!isNullOrUnDef(props.txtFieldModel) && props.txtFieldModel == 1) {
      label.show = false;
    }
  } else {
    cluster.label.show = false;
  }
};
</script>
<style>
.home-root {
  width: 100%;
  height: 100%;
  background-color: #999999;
}
</style>
